<template>
    <div id="add-edit-model">
        <el-dialog
            title="日志详情"
            v-model="isLookDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="方法名称">
                            <el-input disabled v-model="ruleForm.methodName" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="地址">
                            <el-input disabled v-model="ruleForm.location" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="浏览器">
                            <el-input disabled v-model="ruleForm.browser" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="操作系统">
                            <el-input disabled v-model="ruleForm.os" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="类名称">
                            <el-input disabled v-model="ruleForm.className" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="具体消息">
                            <el-input disabled v-model="ruleForm.message" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="请求参数">
                            <el-input disabled v-model="ruleForm.param" clearable />
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="返回结果">
                            <el-input disabled v-model="ruleForm.result" clearable />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue'
import { FormInstance, FormRules , ElMessage, ElButton, ElCol, ElDatePicker, ElDialog, ElDivider, ElForm, ElFormItem, ElInput, ElOption, ElRadio, ElRow, ElSelect, ElTable, ElTableColumn } from 'element-plus'

/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    location: String,
    browser: String,
    os: String,
    className: String,
    methodName: String,
    param: String,
    result: String,
    message: String
}
export default defineComponent( {
    name: 'add-edit-model',
    components: {},
    props: {
        isLookDialog:{
            type: Boolean,
            default: false,
        },
        lookInfo: {
            type: Object,
            default: {}
        }
    },
    setup(props,ctx){
        const ruleFormRef = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelLookClick')
        }

        /*** 监听isLookDialog的变化 */
        watch(() => props.isLookDialog,(newVal) => {
            if(newVal){
                console.log(toRaw(props.lookInfo),'lookInfo')
                state.ruleForm.location = toRaw(props.lookInfo).location,
                state.ruleForm.browser = toRaw(props.lookInfo).browser,
                state.ruleForm.os = toRaw(props.lookInfo).os,
                state.ruleForm.className = toRaw(props.lookInfo).className,
                state.ruleForm.methodName = toRaw(props.lookInfo).methodName,
                state.ruleForm.param = toRaw(props.lookInfo).param,
                state.ruleForm.result = toRaw(props.lookInfo).result,
                state.ruleForm.message = toRaw(props.lookInfo).message
            }
        })

        /*** isLookDialog 响应弹窗的关闭  */
        const isLookDialog = computed(() => {
            return props.isLookDialog
        })

        return {
            handleClose,
            ruleFormRef,
            ...toRefs(state),
            isLookDialog,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>